<template>
  <div class="plan-container">
    <div class="list" v-if="props.mode == 1">
        <img src="@/assets/plan/list/ToDoList.png" class="to-do-list-logo">
        <img src="@/assets/plan/list/add.png" class="add-list-btn" @click="showAddPlan = true">

        <div class="navigation">
          <button :class="['category', { active: activeCategory === 1 }]" @click="chooseCategory(1)">按分类</button>
          <button :class="['category', { active: activeCategory === 2 }]" @click="chooseCategory(2)">按完成情况</button>
        </div>

        <el-dialog
          title="新建任务"
          width="30%"
          v-model="showAddPlan"
        >
          <span>
            <el-form :model="addPlanForm" ref="form" label-width="80px" :inline="false" size="normal">
              <el-form-item label="计划名称" size="normal">
                <el-input v-model="addPlanForm.planName" clearable />
              </el-form-item>

              <el-form-item label="分类" size="normal">
                <el-select v-model="addPlanForm.categoryId" placeholder="请选择分类">
                  <el-option
                    v-for="item in categories"
                    :key="item.id"
                    :label="item.categoryName"
                    :value="item.id"
                  >
                    <span style="float: left">{{ item.categoryName }}</span>
                    <span
                      style="
                        float: right;
                        color: var(--el-text-color-secondary);
                        font-size: 13px;
                      "
                    >
                      <div @click.stop="deleteCategory(item.id)">删除</div>
                    </span>
                  </el-option>
                  <template #footer>
                    <el-button v-if="!isAdding" text bg size="small" @click="isAdding = true">
                      添加分类
                    </el-button>
                    <template v-else>
                      <el-input
                        v-model="category"
                        class="option-input"
                        placeholder="添加分类"
                        size="small"
                      />
                      <el-button type="primary" size="small" @click="onConfirmAddCategory">
                        确定
                      </el-button>
                      <el-button size="small" @click="isAdding = false">取消</el-button>
                    </template>
                  </template>
                </el-select>
              </el-form-item>

              <el-form-item label="标签" size="normal">
                <el-input v-model="addPlanForm.label" clearable />
              </el-form-item>

              <el-form-item label="开始时间" size="normal">
                <el-date-picker v-model="addPlanForm.startTime" type="datetime" size="normal" placeholder="选择日期时间" value-format="YYYY-MM-DDTHH:mm:ss">
                </el-date-picker>
              </el-form-item>

              <el-form-item label="逾期时间" size="normal">
                <el-date-picker v-model="addPlanForm.overdueTime" type="datetime" size="normal" placeholder="选择日期时间" value-format="YYYY-MM-DDTHH:mm:ss">
                </el-date-picker>
              </el-form-item>

              <el-form-item label="提醒时间" size="normal">
                <el-date-picker v-model="addPlanForm.remindTime" type="datetime" size="normal" placeholder="选择日期时间" value-format="YYYY-MM-DDTHH:mm:ss">
                </el-date-picker>
              </el-form-item>

              <el-form-item label="提醒频率" size="normal">
                <el-select v-model="addPlanForm.remindSequence" placeholder="请选择分类">
                  <el-option
                    v-for="(item,index) in sequences"
                    :key="index"
                    :label="item"
                    :value="index"
                  >
                    
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="备注" size="normal">
                <el-input v-model="addPlanForm.remark" clearable />
              </el-form-item>

              <el-form-item label="子任务" size="normal">
                <div v-for="(subTask, index) in addPlanForm.planSub" :key="index">
                  <el-input v-model="addPlanForm.planSub[index]" placeholder="请输入子任务"></el-input>
                  <el-button type="text" @click="removeSubTask(index)">删除</el-button>
                </div>
                <el-button type="primary" @click="addSubTask">添加子任务</el-button>
              </el-form-item>
            </el-form>
          </span>
          <template #footer>
            <span>
              <el-button @click="showAddPlan = false">取消</el-button>
              <el-button type="primary" @click="conFirmAddPlan">确认</el-button>
            </span>
          </template>
        </el-dialog>
        
        <el-dialog
          title="修改任务"
          width="30%"
          v-model="showEditPlan"
        >
          <span>
            <el-form :model="currentPlan" ref="form" label-width="80px" :inline="false" size="normal">
              <el-form-item label="计划名称" size="normal">
                <el-input v-model="currentPlan.planName" clearable />
              </el-form-item>

              <el-form-item label="分类" size="normal">
                <el-select v-model="currentPlan.categoryId" placeholder="请选择分类">
                  <el-option
                    v-for="item in categories"
                    :key="item.id"
                    :label="item.categoryName"
                    :value="item.id"
                  >
                    <span style="float: left">{{ item.categoryName }}</span>
                    <span
                      style="
                        float: right;
                        color: var(--el-text-color-secondary);
                        font-size: 13px;
                      "
                    >
                      <div @click.stop="deleteCategory(item.id)">删除</div>
                    </span>
                  </el-option>
                  <template #footer>
                    <el-button v-if="!isAdding" text bg size="small" @click="isAdding = true">
                      添加分类
                    </el-button>
                    <template v-else>
                      <el-input
                        v-model="category"
                        class="option-input"
                        placeholder="添加分类"
                        size="small"
                      />
                      <el-button type="primary" size="small" @click="onConfirmAddCategory">
                        确定
                      </el-button>
                      <el-button size="small" @click="isAdding = false">取消</el-button>
                    </template>
                  </template>
                </el-select>
              </el-form-item>

              <el-form-item label="标签" size="normal">
                <el-input v-model="currentPlan.label" clearable />
              </el-form-item>

              <el-form-item label="开始时间" size="normal">
                <el-date-picker v-model="currentPlan.startTime" type="datetime" size="normal" placeholder="选择日期时间" value-format="YYYY-MM-DDTHH:mm:ss">
                </el-date-picker>
              </el-form-item>

              <el-form-item label="逾期时间" size="normal">
                <el-date-picker v-model="currentPlan.overdueTime" type="datetime" size="normal" placeholder="选择日期时间" value-format="YYYY-MM-DDTHH:mm:ss">
                </el-date-picker>
              </el-form-item>

              <el-form-item label="提醒时间" size="normal">
                <el-date-picker v-model="currentPlan.remindTime" type="datetime" size="normal" placeholder="选择日期时间" value-format="YYYY-MM-DDTHH:mm:ss">
                </el-date-picker>
              </el-form-item>

              <el-form-item label="提醒频率" size="normal">
                <el-select v-model="currentPlan.remindSequence" placeholder="请选择分类">
                  <el-option
                    v-for="(item,index) in sequences"
                    :key="index"
                    :label="item"
                    :value="index"
                  >
                    
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="备注" size="normal">
                <el-input v-model="currentPlan.remark" clearable />
              </el-form-item>

              <el-form-item label="子任务" size="normal">
                <div v-for="subTask in currentPlan.planSubVos" :key="subTask.id">
                  <el-input v-model="subTask.name" placeholder="请输入子任务" disabled></el-input>
                  <el-button type="text" @click="removePlan(subTask.id,2)">删除</el-button>
                </div>
                <el-input v-model="subPlan" placeholder="请输入子任务"  clearable />
                <el-button type="primary" @click="addSubPlan">添加子任务</el-button>
              </el-form-item>
            </el-form>
          </span>
          <template #footer>
            <span>
              <el-button type="danger" @click="removePlan(currentPlan.id,1)">删除此计划</el-button>
              <el-button @click="showEditPlan = false">取消</el-button>
              <el-button type="primary" @click="confirmEditPlan">确认</el-button>
            </span>
          </template>
        </el-dialog>

        <div class="plan-items-wrapper">
          <div class="plan-item-container" v-for="(plans,index) in planData" :key="index">
            <img :src="imgs[index % 3]" alt="" class="animal">
            <div class="container-title">{{ plans.name }}</div>
            <div class="plans">
              <div class="plan" v-for="plan in plans.plans" :key="plan.id">
                <div class="main-plan">
                  <input type="checkbox" class="finish" :checked="plan.isComplete == 1" @change="handleChangePlan($event,plan.id,1)">
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="plan.planName"
                    placement="top-start"
                  >
                    <div class="title" @click="onShowEditPlan(plan.id)">
                      {{ plan.planName }}
                    </div>
                  </el-tooltip>
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="plan.label"
                    placement="top-start"
                  >
                    <div class="tag">
                      {{ plan.label }}
                    </div>
                  </el-tooltip>
                  <div class="msg">
                    {{ plan.content }}
                  </div>
                </div>
                <div class="sub-plan" v-for="subPlan in plan.planSubVos" :key="subPlan.id">
                  <input type="checkbox" class="finish" :checked="subPlan.isComplete == 1" @change="handleChangePlan($event,subPlan.id,2)">
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="subPlan.name"
                    placement="top-start"
                  >
                    <div class="title" @click="onShowEditPlan(plan.id)">
                      {{ subPlan.name }}
                    </div>
                  </el-tooltip>
                  <div class="msg" v-if="subPlan.completeTime">
                    {{ formatDate(subPlan.completeTime) }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
    <div class="view" v-if="props.mode == 2">
      <FullCalendar :options="calendarOptions" ref="calendarRef"/>

      <el-dialog
        title=""
        v-model="showView"
        width="30%"
      >
        <el-descriptions :border="true" title="计划详情" column="1">
          <el-descriptions-item label="计划名称">
            {{ datePlan.planName }}
          </el-descriptions-item>
          <el-descriptions-item label="标签">
            {{ datePlan.label }}
          </el-descriptions-item>
          <el-descriptions-item label="分类">
            {{ datePlan.planCategoryVo.categoryName }}
          </el-descriptions-item>
          <el-descriptions-item label="完成状态">
            {{ datePlan.isComplete == 1 ? "已完成" : "未完成" }}
          </el-descriptions-item>
          <el-descriptions-item label="备注">
            {{ datePlan.remark }}
          </el-descriptions-item>
          <el-descriptions-item label="开始时间">
            {{ formatDate(datePlan.startTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="逾期时间">
            {{ formatDate(datePlan.overdueTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="提醒时间">
            {{ formatDate(datePlan.remindTime) }}
          </el-descriptions-item>
          <el-descriptions-item :label="'子任务' + (index + 1)" v-for="(subPlan,index) in datePlan.planSubVos" :key="subPlan.id">
            {{ subPlan.name }}
          </el-descriptions-item>
        </el-descriptions>
        <template #footer>
          <span>
            <el-button type="primary" @click="showView = false">确认</el-button>
          </span>
        </template>
      </el-dialog>
      
    </div>

    <div class="chat" v-if="props.mode == 3">
      <div class="chat-container">
        <div class="chat-history">
          <div v-if="chatMessages.length === 0" class="ai-message" v-html='marked("# 嘿，我是你的学习计划小助手！在 Ctrl+Learn，我们致力于帮你规划更高效的学习节奏。关于学习目标、任务安排，有我就够啦~")'>
          </div>
          <div v-if="chatMessages.length === 0">
            <img src="@/assets/logo.png" class="logo-pic">
          </div>
          <div 
            v-for="(msg, index) in chatMessages" 
            :key="index" 
            :class="['chat-message', msg.sender === 'ai' ? 'ai-message' : 'user-message', msg.loading ? 'loading' : '']"
            v-html="msg.content"
          >

          </div>
        </div>
        <div class="chat-input">
          <el-input 
            v-model="chatInput" 
            placeholder="请输入您的问题" 
            @keyup.enter="sendChat"
            :disabled="isLoading"
          />
          <el-button type="primary" @click="sendChat" :disabled="isLoading">发送</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getMonthView, planAi, plans, plansAdd, plansByCategory, plansCategory, plansCategoryAdd, plansCategoryDelete, plansComplete, plansCompleteChange, plansRemove, plansSon, plansUpdate } from "@/api/PlanApi"
import rabbit from '@/assets/plan/list/rabbit.png'
import duck from '@/assets/plan/list/duck.png'
import dog from '@/assets/plan/list/dog.png'
import { ElMessage } from "element-plus"
import { onMounted,ref, watch, nextTick } from "vue"
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import { marked } from "marked"

const props = defineProps({
  mode: {
    type: Number,
    default: 1
  }
})

const calendarOptions = ref({
  plugins: [ dayGridPlugin ],
  initialView: 'dayGridMonth',
  weekends: false,
  height: 932,
  contentHeight: 742,
  locale: 'zh-cn',
  weekends: true,
  buttonText: {
    today: '回到今天'  // 将 "today" 改为 "回到今天"
  },
  headerToolbar: {
    left: 'prev',
    center: 'title',
    right: 'today,next'
  },
  datesSet: (arg) => {
    month.value = arg.view.currentStart.getMonth() + 1
    year.value = arg.view.currentStart.getFullYear()
    getCalendarData()
  },
  eventClick: (info) => {
    onShowView(info.event.id)
  }
})

const planData = ref([])

const formatDate = (str) => {
  const date = new Date(str)
  const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' }
  return date.toLocaleString('zh-CN', options)
}

const showAddPlan = ref(false)
const addPlanForm = ref({
  planName: '',
  categoryId: undefined,
  label: '',
  startTime: '',
  overdueTime: '',
  remindTime: '',
  remark: '',
  planSub: [],
  remindSequence: 0
})

const addSubTask = () => {
  addPlanForm.value.planSub.push('')
}

const removeSubTask = (index) => {
  addPlanForm.value.planSub.splice(index, 1)
}

const conFirmAddPlan = async () => {
  await plansAdd(addPlanForm.value)
  addPlanForm.value = {
    planName: '',
    categoryId: undefined,
    label: '',
    startTime: '',
    overdueTime: '',
    remindTime: '',
    remark: '',
    planSub: []
  }
  refreshPlan()
  ElMessage.success('添加成功')
  showAddPlan.value = false
}

const handleChangePlan = async (e,id,type) => {
  await plansCompleteChange(e.target.checked ? 1 : 0,id,type)
  refreshPlan()
}

const showEditPlan = ref(false)
const currentPlan = ref()
const onShowEditPlan = async (id) => {
  currentPlan.value = (await plans(id)).data.data
  showEditPlan.value = true
  currentPlan.value.categoryId = currentPlan.value.planCategoryVo.id
  currentPlan.value.remindSequence = 0
}

const confirmEditPlan = async () => {
  const res = await plansUpdate(currentPlan.value)
  refreshPlan()
  ElMessage.success('修改成功')
  showEditPlan.value = false
}

const removePlan = async (id,type) => {
  const res = await plansRemove(id,type)
  refreshPlan()
  ElMessage.success('删除成功')
  if(type == 1){
    showEditPlan.value = false
  }else{
    currentPlan.value = await (await plans(currentPlan.value.id)).data.data
  }
}

const subPlan = ref('')
const addSubPlan = async () => {
  const res = await plansSon({
    name: subPlan.value,
    parentId: currentPlan.value.id
  })
  refreshPlan()
  currentPlan.value = await (await plans(currentPlan.value.id)).data.data
  ElMessage.success('添加子任务成功')
  subPlan.value = ''
  currentPlan.value.categoryId = currentPlan.value.planCategoryVo.id
}

const activeCategory = ref(2)
const chooseCategory = (cat) => {
  activeCategory.value = cat
}

const imgs = ref([rabbit,duck,dog])
watch(() => activeCategory.value,async () => {
  if(activeCategory.value == 2){
    planData.value = (await plansComplete()).data.data
  }else{
    planData.value = (await plansByCategory()).data.data
  }
},{
  immediate: true
})

const refreshPlan = async () => {
  if(activeCategory.value == 2){
    planData.value = (await plansComplete()).data.data
  }else{
    planData.value = (await plansByCategory()).data.data
  }
}

const categories = ref()
onMounted(async () => {
  categories.value = (await plansCategory()).data.data
})

const isAdding = ref(false)
const category = ref('')
const onConfirmAddCategory = async () => {
  await plansCategoryAdd(category.value)
  categories.value = (await plansCategory()).data.data
  category.value = ''
}

const deleteCategory = async (id) => {
  await plansCategoryDelete(id)
  addPlanForm.value.categoryId = undefined
  categories.value = (await plansCategory()).data.data
}

watch(() => props.mode,(newVal) => {
  if(newVal == 1){
    refreshPlan()
  }
},{
  immediate: true
})

const month = ref(1)
const year = ref(2005)
const calendarData = ref([])
const getCalendarData = async () => {
  calendarData.value = await (await getMonthView(year.value,month.value)).data.data
  renderCalendar()
}

const renderCalendar = () => {
  calendarOptions.value.events = calendarData.value.map(plan => ({
    id: plan.id,
    title: plan.planName,
    start: plan.startTime,
    end: plan.overdueTime,
    backgroundColor: plan.isComplete == 1 ? '#ffdda1' : '#ac7641',
    borderColor: plan.isComplete == 1 ? '#ffdda1' : '#ac7641',
    textColor: plan.isComplete != 1 ? '#fbe7bd' : '#ac7641'
  }))
}

const showView = ref(false)
const datePlan = ref()
const onShowView = async (id) => {
  datePlan.value = await (await plans(id)).data.data
  showView.value = true
}

const chatMessages = ref([])
const chatInput = ref('')
const isLoading = ref(false)

const sendChat = async () => {

  if (isLoading.value) {
    ElMessage.error('请慢一点')
    return
  }

  if (chatInput.value.trim() === '') return

  const userMsg = chatInput.value
  chatMessages.value.push({ sender: 'user', content: userMsg })
  chatInput.value = ''
  
  isLoading.value = true
  chatMessages.value.push({ sender: 'ai', content: '加载中...' })
  const loadingIndex = chatMessages.value.length - 1
  
  const aiResponse = await (await planAi(userMsg)).data.data
  
  chatMessages.value.splice(loadingIndex, 1, { sender: 'ai', content: marked(aiResponse) })
  isLoading.value = false
}

const sequences = ref(["仅一次","每小时","每天","每周","每月"])
</script>

<style scoped>

.plan-container {
  position: relative;
  width: 1838px;
  height: 932px;
  background-image: url('@/assets/plan/background.png');
}

.plan-container .list .to-do-list-logo {
  position: absolute;
  top: 52px;
  left: 119px;
  width: 338px;
  height: 50px;
}

.plan-container .list .add-list-btn {
  position: absolute;
  top: 56px;
  left: 1088px;
  width: 221px;
  height: 63px;
}

.plan-container .list .plan-items-wrapper {
  position: absolute;
  top: 183px; /* 根据需要调整位置 */
  left: 125px; /* 根据需要调整位置 */
  height: 700px;
  width: 1618px;
  display: flex;
  flex-direction: row;       /* 横向排列 */
  overflow-x: auto;          /* 超出宽度时显示滚动条 */
  gap: 87px;
}

.plan-container .list .plan-item-container {
  flex-shrink: 0;
  position: relative;
  background-image: url("@/assets/plan/list/list.png");
  background-size: cover;      /* 根据需求调整 */
  background-repeat: no-repeat;
  /* 可设定最小宽度，高度以外层容器为准 */
  width: 466px;
  height: 681px;
}

.plan-container .list .plan-item-container .container-title {
  position: absolute;
  height: 29px;
	font-family: SimSun;
	font-size: 30px;
	font-weight: bold;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #9f632c;
  top: 50px;
  right: 54px;
}

.plan-container .list .animal {
  position: absolute;
  height: 243px;
  width: 225px;
  top: 438px;
  left: 287px;
  z-index: 999;
}

.plan-container .list .plans {
  position: absolute;
  top: 138px;
  left: 47px;
  height: 475px;
  /* background-color: pink; */
  width: 360px;
  overflow: auto;
}

.plan-container .list .main-plan {
  /* background-color: pink; */
  height: 55px;
  position: relative;
}

input[type="checkbox"].finish {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 31px;
    height: 30px;
    border: 2px solid #9f632c;
    border-radius: 4px; 
    cursor: pointer;
    position: relative;
}

input[type="checkbox"].finish:checked {
    background-color: #9f632c;
    border-color: #9f632c;
}

input[type="checkbox"].finish:checked::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 7px;
    width: 11px;
    height: 5px;
    border: solid #ffffff; /* 自定义勾号颜色 */
    border-width: 0 2px 2px 0;
    transform: rotate(315deg) scaleX(-1);
}

.plan-container .list .main-plan .title {
  position: absolute;
  left: 52px;
  top: 0px;
	height: 35px;
	font-family: SimSun;
	font-size: 30px;
	font-weight: bold;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #9f632c;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
  white-space: nowrap;
}

.plan-container .list .main-plan .tag {
  position: absolute;
	height: 35px;
	font-family: SimSun;
	font-size: 21px;
	font-weight: bold;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #9f632c;
  max-width: 24%;
  overflow: hidden;
  text-overflow: ellipsis;
  top: 1px;
  white-space: nowrap;
  left: 272px;
}

.plan-container .list .main-plan .msg {
  position: absolute;
  height: 16px;
	font-family: SimSun;
	font-size: 15px;
	font-weight: bold;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #b78353;
  text-align: right;
  width: 100%;
}

.plan-container .list .sub-plan {
  position: relative;
  height: 55px;
}

.plan-container .list .sub-plan .finish {
  margin-left: 35px;
}

.plan-container .list .sub-plan .title {
  position: absolute;
  left: 80px;
	height: 35px;
	font-family: SimSun;
	font-size: 30px;
	font-weight: bold;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #9f632c;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 51%;
  top: 1px;
  white-space: nowrap;
}

.plan-container .list .sub-plan .msg {
  position: absolute;
  height: 16px;
	font-family: SimSun;
	font-size: 15px;
	font-weight: bold;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #b78353;
  text-align: right;
  width: 100%;
  top: 35px;
}

.navigation {
  left: 700px;
  top: 44px;
  position: absolute;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
}

.navigation .category {
  font-family: SimSun;
  font-size: 24px;
  font-weight: bold;
  color: #9f632c;
  background-color: transparent;
  border: 2px solid #9f632c;
  border-radius: 10px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.navigation .category:hover {
  background-color: #9f632c;
  color: #fbd7be;
}

.navigation .category.active {
  background-color: #9f632c;
  color: #fbd7be;
}

:deep(.fc-header-toolbar) {
  background-color: transparent !important;
  width: 1656px;
  margin-left: 92px;
}

:deep(.fc-scrollgrid) {
  position: absolute;
  left: 92px;
  background-color: #fbe7bd;
  border-top: #ac7641 2px solid;
  border-left: #ac7641 2px solid;
  width: 1656px;
  box-sizing: border-box;
}

:deep(.fc-scrollgrid table) {
  border-collapse: separate;
  border-spacing: 0;
}
:deep(.fc-scrollgrid td),
:deep(.fc-scrollgrid th) {
  border-right: 1px solid #ac7641 !important;
  border-bottom: 1px solid #ac7641 !important;
}

:deep(.fc-scrollgrid thead) {
  background-color: #ac7641;
  color: #fbe7bd;
}

:deep(.fc-toolbar-title) {
	height: 40px;
	font-family: SimSun;
	font-size: 40px;
	font-weight: bold;
	font-stretch: normal;
	letter-spacing: 1px;
	color: #602f02;
}

:deep(.fc-button) {
  background-color: #602f02;  /* 默认背景色 */
  color: #fff;                /* 按钮文字颜色 */
  border: none;               /* 移除边框 */
  border-radius: 4px;         /* 可根据需要调整 */
  padding: 6px 12px;          /* 调整内边距 */
  transition: background-color 0.3s ease;
}

:deep(.fc-button:hover) {
  background-color: #8a4e2a;  /* hover 状态下的背景色 */
}

:deep(.fc-button:active) {
  background-color: #502710;  /* 点击时的背景色 */
}

:deep(.fc-button[disabled]) {
  background-color: #ac7641 !important; /* 设置禁用状态的背景色 */
  color: #999999 !important;            /* 设置禁用状态的文字颜色 */
  opacity: 0.5;                         /* 可选：设置半透明效果 */
  cursor: not-allowed;                  /* 改变鼠标光标 */
}

:deep(.fc-button[disabled]:hover) {
  background-color: #ac7641 !important; /* 防止 hover 状态改变 */
}

:deep(.fc-event) {
  border: none;
}

:deep(.fc-event:hover) {
  background-color: #8a4e2a !important;
}

/* 在 <style scoped> 中添加AI对话框样式 */
.chat-container {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 1600px;
  height: 700px;
  background-color: #fbe7bd;
  border: 2px solid #ac7641;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.chat-history {
  flex: 1;
  overflow-y: auto;
  padding-right: 10px;
  margin-bottom: 20px;
}

.chat-message {
  margin: 10px 0;
  padding: 10px;
  border-radius: 8px;
  font-family: SimSun;
  font-size: 18px;
}

.user-message {
  background-color: #9f632c;
  color: #fbd7be;
  align-self: flex-end;
}

.ai-message {
  background-color: #fbd7be;
  color: #9f632c;
  align-self: flex-start;
}

.chat-input {
  display: flex;
  gap: 10px;
  align-items: center;
}

.chat-input .el-input {
  height: 50px;
  width: 1500px;
  font-size: 18px;
}

.chat-message.loading {
  animation: blink 1s infinite;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

:deep(.chat-input .el-button) {
  background-color: #9f632c;
  color: #fbd7be;
  height: 50px;
  font-size: 18px;
  width: 100px;
}

.chat-placeholder {
  text-align: center;
  color: #9f632c;
  background-color: #fbd7be;
  font-family: SimSun;
  font-size: 18px;
  margin-top: 20px;
}

.logo-pic {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 490px;
}
</style>